<!-- components/Celebration.vue -->
<template>
  <view class="celebration-container" v-if="show">
    <view class="confetti" v-for="n in 30" :key="n" :style="confettiStyle(n)"></view>
    <view class="celebration-content">
      <uni-icons type="checkbox-filled" size="80" color="#52c41a"></uni-icons>
      <text class="celebration-text">{{ message }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: '操作成功!'
    }
  },
  methods: {
    confettiStyle(index) {
      const colors = ['#1890ff', '#52c41a', '#fa8c16', '#f5222d', '#722ed1']
      const color = colors[index % colors.length]
      const rotation = Math.random() * 360
      const duration = 2 + Math.random() * 3
      const delay = Math.random() * 2
      const left = Math.random() * 100
      const size = 10 + Math.random() * 20
      
      return {
        backgroundColor: color,
        transform: `rotate(${rotation}deg)`,
        left: `${left}%`,
        width: `${size}px`,
        height: `${size}px`,
        animationDuration: `${duration}s`,
        animationDelay: `${delay}s`
      }
    }
  }
}
</script>

<style scoped>
.celebration-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.confetti {
  position: absolute;
  top: -20px;
  animation: confetti-fall linear infinite;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.celebration-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.celebration-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #52c41a;
  margin-top: 30rpx;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>